<template>
	<view class="container" v-if="orderDetails" >
		<view class="order-info">
			<text class="order-title">{{orderDetails.storeName}} 新增订单：{{orderDetails.document_number}} <br></text>
			<text class="order-date"> {{formatTime(orderDetails.created_at)}}</text>
		</view>
		<view class="order-change">
			<text class="change-title">操作之后的订单信息</text>
			<text class="change-note">有红色文字表示有变更</text>
		</view>
		<view class="sales-order">
			<text class="order-header">销售订单</text>
			<hr>
			<view class="order-details">
				<text class="order-number">单号：{{orderDetails.document_number}} <br> 时间：
					{{formatTime(orderDetails.created_at)}}</text>
			</view>
			<view class="product-info">
				<text class="product-title">商品/条码</text>
				<text class="product-quantity">数量</text>
				<text class="product-price">单价</text>
				<text class="product-total">小计</text>
			</view>
			<view class="product-item" v-for="(item, index) in orderDetails.list" :key="index">
				<text class="product-name">{{item.productName}} <br> {{item.barcode}}</text>
				<text class="product-count">{{item.quantity}}</text>
				<text class="product-unit-price">¥{{item.retailPrice.toFixed(2)}}</text>
				<text class="product-subtotal">¥{{(item.retailPrice * item.quantity).toFixed(2)}}</text>
			</view>
			<view class="order-summary">
				<text class="summary-item">商品合计</text>
				<text class="summary-item">{{orderDetails.list.length}} 件</text>
				<text class="summary-item"></text>
				<text class="summary-item">¥{{totalAmount.toFixed(2)}}</text>
			</view>
			<view class="order-summary">
				<text class="summary-item">优惠金额</text>
				<text class="summary-item">¥{{orderDetails.discount_amount.toFixed(2)}}</text>
			</view>
			<view class="order-summary">
				<text class="summary-item">应收金额</text>
				<text class="summary-item">¥{{orderDetails.amount_due.toFixed(2)}}</text>
			</view>
			<view class="order-summary">
				<text class="summary-item">实付金额</text>
				<text class="summary-item">¥{{orderDetails.actual_received_amount.toFixed(2)}}</text>
			</view>
			<view class="payment-method">
				<text class="payment-title">支付方式</text>
				<text class="payment-method">微信</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const orderDetails = ref(null); // 初始化为空对象
	// 计算商品总金额
	const totalAmount = computed(() => {
		if (orderDetails.value.list) {
			return orderDetails.value.list.reduce((total, item) => {
				return total + item.retailPrice * item.quantity;
			}, 0);
		}
		return 0;
	});

	// 获取页面参数中的 salesId
	onLoad((options) => {
		const salesId = options.salesId; // 从页面参数中获取 salesId
		if (!salesId) {
			uni.showToast({
				title: "订单信息加载失败",
				icon: "none"
			});
			return;
		}

		// 请求商品详情
		const app = getApp();
		const url = app.globalData.url;
		uni.request({
			url: `${url}SALE-SERVICE/sale/selectSalesOrderByIdWX?salesId=${salesId}`,
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					orderDetails.value = res.data; // 使用 ref 的 value 属性赋值
				} else {
					uni.showToast({
						title: "加载失败",
						icon: "none"
					});
				}
			},
			fail: () => {
				uni.showToast({
					title: "网络请求错误",
					icon: "none"
				});
			}
		});
	});
	function formatTime(timeString) {
		const date = new Date(timeString);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		return `${year}-${month}-${day} ${hours}:${minutes}`;
	}
</script>

<style>
	body{
		background-color: #f8f8f8;
	}
	.container {
		height: 580px;
		padding: 20px;
		background-color: #f8f8f8;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 20px;
	}

	.order-info {
		margin-bottom: 20px;
		background-color: #fff;
		padding: 15px;
		border-radius: 5px;
	}

	.order-title {
		font-size: 15px;
	}

	.order-date {
		font-size: 14px;
		color: #888;
	}

	.order-change {
		padding-left: 10px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.change-title {
		font-size: 16px;

	}

	.change-note {
		font-size: 14px;
		color: #888;
	}

	.sales-order {
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
	}

	.order-header {
		font-size: 18px;
		/* font-weight: bold; */
		margin-bottom: 10px;
	}

	.order-details {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.order-number,
	.order-time {
		font-size: 14px;
	}

	.product-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.product-title,
	.product-quantity,
	.product-price,
	.product-total {
		font-size: 14px;
	}

	.product-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.product-name,
	.product-code,
	.product-count,
	.product-unit-price,
	.product-subtotal {
		font-size: 14px;
	}

	.order-summary {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.summary-item {
		font-size: 14px;
	}

	.payment-method {
		display: flex;
		justify-content: space-between;
	}

	.payment-title,
	.payment-method {
		font-size: 14px;
	}
</style>